<template>
  <layout class="container" :appHeader="{title: $route.name, back: false}">
    <view class="category-wrapper">
      <view v-for="(item, index) in category" :key="index" class="item" @click="gotoProduct(item.id)">
        <view class="title">{{item.title}}</view>
        <image :src="item.icon" mode="scaleToFill" class="icon" />
      </view>
    </view>
  </layout>
</template>
<script>
import Index from './index';

export default Index;
</script>
<style lang="scss" scoped>
@import "index";
// .title {
//   color: var(--base-color);
//   border-bottom: 1rpx solid var(--simple-color);
//   padding: 40rpx;
//   margin-bottom: 20rpx;
//   margin-left: 20rpx;
//   margin-right: 20rpx;
// }
// .u-card-wrap {
//   background-color: $u-bg-color;
//   padding: 1px;
// }

// .u-body-item {
//   font-size: 32rpx;
//   color: #333;
//   padding: 20rpx 10rpx;
// }

// .u-body-item image {
//   width: 120rpx;
//   flex: 0 0 120rpx;
//   height: 120rpx;
//   border-radius: 8rpx;
//   margin-left: 12rpx;
// }
</style>